<template>
  <div class="content">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div style="min-height: 100vh;" v-show="isInit">
        <van-cell-group title="邮件列表">
          <div v-for="(item,index) in mails" :key="mails.id">
            <div class="mail">
              <van-cell :title="item.from_user.nick_name" :label="item.msg"
                        label-class="van-multi-ellipsis--l2"
                        :clickable="true"
                        size="large" @click="toMailDetail(item)">
                <template #icon>
                  <div class="headImg">
                    <van-image round :src="item.from_user.avatar" width="60" height="60"/>
                  </div>
                </template>
              </van-cell>
            </div>
          </div>
          <div class="no-content" v-show="mails.length===0">
            <span>暂时没有你的邮件</span>
          </div>
        </van-cell-group>
      </div>
    </van-pull-refresh>
    <van-loading type="spinner" v-show="!isInit"/>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "Mailbox",
  data() {
    return {
      mails: [],
      isLoading:false,
      isInit:false
    }
  },
  methods: {
    onRefresh(){
      this.load()
    },
    load(){
      let that=this
      that.isLoading=true
      api.getMails().then(res=>{
        this.mails=res
        that.isLoading=false
        that.isInit=true
      })
    },
    toMailDetail(mail) {
      MiniApp.setStorage({
        key: "mail",
        data: mail,
        success: () => {
          MiniApp.navigateTo({
            url: "/maildetail.html"
          })
        }
      })
    }
  },
  mounted() {
    this.load()
  }
}
</script>

<style scoped>
.mail {
  margin-bottom: 20px;
}

.headImg {
  margin-right: 20px;
}
</style>